<template>
  <div class="basic-row">
    <Title :titles="'基本信息'" :top="0"></Title>
    <div
      class="basic-infor"
      v-for="(item, index) in basic"
      :key="index"
      :style="
        index
          ? 'margin-top:calc(25 / 1920 * 100vw)'
          : 'margin-top:calc(40 / 1920 * 100vw)'
      "
    >
      <div class="left">
        <span class="mark"></span>
        <span class="title">{{ item.title }}</span>
      </div>
      <div class="right">{{ item.value }}</div>
    </div>
  </div>
</template>
<script>
import Title from "@/pages/online_consulting/title.vue";
export default {
  data() {
    return {};
  },
  props: ['basic'],
  components: { Title },
};
</script>
<style lang="scss" scoped>
.basic-row {
  .basic-infor {
    display: flex;
    justify-content: space-between;
    padding: 0px calc(10 / 1920 * 100vw) calc(14 / 1920 * 100vw);
    border-bottom: 1px solid #f1f1f1;
    .left {
      display: flex;
      align-items: center;
      .mark {
        display: block;
        width: calc(6 / 1920 * 100vw);
        height: calc(6 / 1920 * 100vw);
        border-radius: calc(3 / 1920 * 100vw);
        background: #726d6d;
      }
      .title {
        margin-left: calc(8 / 1920 * 100vw);
        font-size: calc(14 / 1920 * 100vw);
        color: #818080;
      }
    }
    .right {
      font-size: calc(14 / 1920 * 100vw);
      color: #818080;
    }
  }
}
</style>
